<template>
	<view class="uni_box login">
		<navbar title='支付密码' backgroundColor='#010101'>
		</navbar>
		<view class="content">
			<view class="pview">
				<u-field
					v-model="phone"
					label="手 机 号"
					placeholder="请输入手机号"
				>
				</u-field>
			</view>
			<view class="pay">
				<text class="tit">请输入交易密码</text>
				<u-message-input active-color='#fff' inactive-color='#707070' :maxlength="6" :value="password" @finish="finish"></u-message-input>
			</view>
			<view class="pay">
				<text class="tit">请再次确认交易密码</text>
				<u-message-input active-color='#fff' inactive-color='#707070' :maxlength="6" :value="password1" @finish="finish1"></u-message-input>
			</view>
		</view>
		<view class="botbtn">
			<!-- nochou 结束class -->
			
			<view class="btns" @click="next" v-if="!password||!password1">
				提交
			</view>
			<yunpian type='mima' style='width:100%' v-else @click="handleCaptcha"></yunpian>
		</view>
		<PasswordPop pastype='Card' :ispasswordPop="showPasswordPop" @payclose="payclose" @payment='payment'></PasswordPop>
		<!-- <yidunCaptcha ref="captcha" :isSense="false" @verify="handleCaptcha"></yidunCaptcha> -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import PasswordPop from '@/components/PasswordPop/PasswordPop';
	export default {
		components: {
		  'PasswordPop': PasswordPop
		},
		data() {
			return {
				password:'',
				password1:'',
				showPasswordPop:false,
				code:'',//验证码
				phone:''
			};
		},
		async onLoad() {
			let {
				user
			} = await this.$u.api.userInfo();
			console.log(user)
			if(user.phone){
				this.phone = user.phone
			}
			
		},
		methods:{
			finish(e) {
				this.password = e
				// console.log('输入结束，当前值为：' + e);
			},
			finish1(e) {
				this.password1 = e
				// console.log('输入结束，当前值为：' + e);
			},
			async handleCaptcha(validate) {
				console.log("发送验证码开始")
				this.showPasswordPop = true
				let res = await this.$u.api.smsSend({
					phone: this.phone,
					scene: "edit_pay",
					authenticate:validate.authenticate,
					token:validate.token
				});
				this.$refs.captcha.reset();
			},
			next(){
				let password = this.password
				let password1 = this.password1
				let phone = this.phone
				if(!phone){
					this.$refs.uToast.show({
						title: "请输入手机号",
						type: "error"
					})
					return
				}
				if(!password || password.length!=6){
					this.$refs.uToast.show({
						title: "请输入密码",
						type: "error"
					})
					return
				}
				if(!password1 || password1.length!=6){
					this.$refs.uToast.show({
						title: "请输入确认密码",
						type: "error"
					})
					return
				}
				if(password != password1){
					this.$refs.uToast.show({
						title: "两次密码不一致",
						type: "error"
					})
					return
				}
				// this.$refs.captcha.verify();
				
			},
			payclose(){
				this.showPasswordPop = false
			},
			async payment(e){
				console.log(e)//密码字段
				this.code = e
				await this.$u.api.userSetPassword({
					password: this.password,
					code:this.code
				});
				this.$u.toast("成功");
				setTimeout(() => {
					this.showPasswordPop = false
					uni.navigateBack({
						delta:1,//返回层数，2则上上页
					})
				}, 1000);
				
			}
		}
	}
</script>

<style scoped lang="scss">
  page{
  	background-color: #010101;
  }
  .content{
	  padding: 30rpx 0 15rpx;
	  .pview{
		  padding:0 30rpx;
		  margin-bottom: 50rpx;
	  }
	  .pay{
		  display: flex;
		  flex-direction: column;
		  margin-bottom: 30rpx;
		  .tit{
			  font-size: 28rpx;
			  font-family: PingFang SC-Medium, PingFang SC;
			  font-weight: 500;
			  color: #FFFFFF;
			  display: block;
			  text-align: center;
			  margin-bottom: 15rpx;
		  }
	  }
  }
  // 底部按钮开始
  .botbtn{
  	width: 100%;
  	position: fixed;
  	bottom: 0;
  	height: 120rpx;
  	background: #252525;
  	opacity: 1;
  	display: flex;
  	align-items: center;
  	padding: 30rpx;
  	.btns{
  		width: 100%;
  		height: 88rpx;
  		background: linear-gradient(90deg, #9394F3 0%, #82E7CB 54%, #22FC94 100%);
  		border-radius: 8rpx;
  		opacity: 1;
  		display: flex;
  		align-items: center;
  		justify-content: center;
  		font-size: 32rpx;
  		font-family: PingFang SC-Bold, PingFang SC;
  		font-weight: bold;
  		color: #232323;
  	}
  	.nochou{
  		background: #999999;
  		font-weight: bold;
  		color: #232323;
  	}
  }
  //底部按钮结束
  /deep/ .u-label-text[data-v-6e6996df] {
      display: inline-flex;
  	color: #fff;
  }
  /deep/ .uni-input-input{
  	color: #fff;
  }
</style>
